import React from 'react'
import { NavBar, Button, Toast } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import './index.css'

interface AppointmentData {
  doctorName?: string
  jobTitle?: string
  hospital?: string
  department?: string
  avatar?: string
  fee?: number
  date?: string
  timeRange?: string
  patientName?: string
}

function ConfirmAppointment() {
  const navigate = useNavigate()
  const location = useLocation()
  const data: AppointmentData = location.state || {}

  const doctorName = data.doctorName || '刘医生'
  const jobTitle = data.jobTitle || '主任医师'
  const hospital = data.hospital || '四川省保健院南苑'
  const department = data.department || '门诊外一科'
  const avatar = data.avatar || '/doctor-default.svg'
  const fee = typeof data.fee === 'number' ? data.fee : 66
  const date = data.date || '2020-01-27'
  const timeRange = data.timeRange || '08:30-12:00(上午)'

  // 生成随机订单号
  const generateOrderNo = () => {
    const timestamp = Date.now()
    const random = Math.random().toString(36).substring(2, 8)
    return `ORDER_${timestamp}_${random}`.toUpperCase()
  }

  // 处理确认预约
  const handleConfirmAppointment = () => {
    const orderNo = generateOrderNo()
    
    // 显示订单号信息
    Toast.show({
      content: `订单号: ${orderNo}`,
      duration: 2000
    })
    
    // 跳转到缴费页面，传递订单信息
    setTimeout(() => {
      navigate('/outpatient-payment', {
        state: {
          orderNo,
          doctorName,
          jobTitle,
          hospital,
          department,
          fee,
          date,
          timeRange
        }
      })
    }, 2000)
  }

  return (
    <div className="confirm-container">
      <NavBar onBack={() => navigate(-1)}>确认预约</NavBar>

      <div className="card doctor-card">
        <img className="avatar" src={avatar} alt={doctorName} />
        <div className="info">
          <div className="name-row">
            <span className="name">{doctorName}</span>
            <span className="title">{jobTitle}</span>
          </div>
          <div className="sub">{department} {hospital}</div>
        </div>
      </div>

      <div className="card">
        <div className="row">
          <div className="label">预约时间</div>
          <div className="value">{date} {timeRange}</div>
        </div>
        <div className="row">
          <div className="label">就诊科室</div>
          <div className="value">{department}</div>
        </div>
        <div className="row">
          <div className="label">挂号费用</div>
          <div className="value fee">¥ {fee.toFixed(2)}</div>
        </div>
      </div>

      <div className="card">
        <div className="row link">
          <div className="label">就诊人</div>
          <div className="value">{data.patientName || '王小柠'} ＞</div>
        </div>
      </div>

      <div className="card">
        <div className="pay-title">支付方式</div>
        <div className="pay-row">
          <span>自费支付</span>
          <span className="circle" />
        </div>
        <div className="pay-row">
          <span>医保支付</span>
          <span className="circle" />
        </div>
      </div>

      <div className="bottom">
        <Button color='primary' block onClick={handleConfirmAppointment}>确认预约</Button>
      </div>
    </div>
  )
}

export default ConfirmAppointment


